<script setup>
import {onMounted, onUnmounted, ref, watch} from "vue";
import {useSocket} from "@/socket.js";
import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";

const props = defineProps({
  uid: {
    required: true,
    type: Number
  }
})

const onlineStatus = ref(false)

onMounted(()=>{
  useSocket().emit('check online', props.uid)
})

useSocket().on('update online status', data => {
  if (data.uid === props.uid) {
    onlineStatus.value = data.isOnline
  }
})

onUnmounted(()=> {
  useSocket().off('online status')
})

</script>

<template>
    <font-awesome-icon
        :icon="['fas', 'circle-dot']"
        size="2xs"
        class="status"
        :class="onlineStatus ? 'text-success' : 'text-secondary'"
    />
</template>

<style scoped>
.status {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--bs-body-bg);
  padding: 2px;
  bottom: -3px;
  right: -3px;
  position: absolute;
}
</style>